<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
    <!-- <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> -->
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-6 col-lg-4">
                <h2 class="mt-5 mb-3 text-center">登录</h2>
                <a class="btn btn-secondary" href="./register.html">注册</a>
                <form id="loginForm">
                    <div class="form-group">
                        <label class="control-label" for="username">用户名</label>
                        <input type="text" class="form-control" id="username" name="username">
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" class="form-control" id="password" name="password">
                    </div>
                    <div class="text-center">
                        <button type="submit" id="submitBtn"
                            class="btn btn-primary mt-3 col-8 col-lg-6 disabled">登录</button>
                    </div>

                </form>
            </div>
        </div>
    </div>

    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../node_modules/js-cookie/dist/js.cookie.js"></script>

    <script>
        $(document).ready(function () {

            // 监听用户名和密码输入框的输入事件
            $("#username, #password").on('input', function () {
                if ($('#username').val() && $('#password').val()) {
                    $('#submitBtn').removeClass('disabled');
                } else {
                    $('#submitBtn').addClass('disabled');
                }
            });

            // 处理登录表单提交事件
            $('#loginForm').submit(function (event) {
                event.preventDefault();
                var formData = {
                    action: 'login',
                    data: {
                        username: $('#username').val(),
                        password: $('#password').val()
                    }
                };
                $.ajax({
                    url: '/api/account',
                    type: 'POST',
                    data: JSON.stringify(formData),
                    contentType: 'application/json',
                    dataType: 'json',
                    success: function (response) {
                        if (response.errno == 0) {
                            // 登录成功，设置 Cookie
                            Cookies.set('username', formData.data.username, { expires: 1, path: '/' });
                            Cookies.set('pic', response.data, { expires: 1, path: '/' });
                            window.location.href = '../index.html?isFromLoginPage=true';
                            setTimeout(function () {
                                loadBillData();
                            }, 1000); // 1秒后执行
                        } else {
                            alert(response.message)
                        }
                    },
                    error: function (xhr, status, error) {
                        // Handle login error
                        console.error('Login failed: ' + error);
                    }
                });
            });
        });
    </script>
</body>

</html>